<script>
import router from "@/router/index.js";
import store from '@/store/index.js'
import iconDanger from './images/icon-danger.svg'
import MITT_BUS from '@/utils/mitt.js'
import { View } from "@element-plus/icons-vue";
import OverLayReyuan from '@/views/pages/search/modules/Section-1/overLay.vue';
import OverLayHuanre from '@/views/pages/search/modules/Section-2/overLay.vue';
import OverLay from "@/views/pages/search/modules/Section-1/overLay.vue";
export default {
  name: "information-heat",
  components: { OverLay, View, OverLayReyuan, OverLayHuanre },
  data() {
    return {
      mainTitle: '名称',
      showAddition: false,
      iconDanger: iconDanger,
      isShining: false,
      showOverLayReyuan: false,
      showOverLayHuanre: false,
    }
  },
  props: {
    uiSize: {
      default: '',
      required: false
    },
    mainTitleHide: {
      default: '',
      required: true
    },
    mainTitle: {
      default: '',
      required: true
    },
    type: {
      default: '',
      required: true
    },
    stationType: {
      default: '',
      required: true
    },
    id: {
      default: '',
      required: true
    },
    // 主列表
    listData: {
      default: () => { return [] },
      required: true
    },
    // 分列表
    additionListData: {
      default: () => { return [] },
      required: true
    },
    showRoute: {
      default: true,
      required: false
    },
    showButtom: {
      default: false,
      required: true
    },
    heightGap: {
      default: '0rem',
      required: false
    }
  },
  computed: {
    isSimulating() {
      return store.state.isSimulating
    }
  },
  watch: {
  },
  mounted() {
    this.showAddition = !!this.additionListData.length;
    if (this.isSimulating) {
      if (['GRZ', 'HRZ'].indexOf(this.type) !== -1) {
        this.setBarriorPoint();
      }
    }
  },
  beforeUnmount() {
  },
  methods: {
    close() {
      this.$emit('close')
    },
    getTitleStyle() {
      return
    },
    routeTo() {
      router.push({
        path: '/heat-detail',
        query: {
          id: this.id,
          type: this.type,
          stationType: this.stationType
        }
      })
    },
    // 过滤供热范围
    filterGongrefanwei(hrzBMs) {
      let attributeFilter = ''
      let arr = [];
      if (hrzBMs) {
        hrzBMs.forEach(v => {
          arr.push('HRZBM=' + '\'' + v + '\'')
        })
        attributeFilter = arr.join(' OR ');
        Api.getDataOfGRFW({
          ids: [],
          // 区域名称 换热站名称 换热站编码
          fields: ['SMID', 'QYMC', 'HRZMC', 'HRZBM'],
          attributeFilter: attributeFilter
        }).then(res => {
          if (!res.features || !res.features.length) { return }
          MITT_BUS.emit('rerender-highlight-layer', {
            data: res,
            type: 'heat-fanwei',
            // 是否隐藏其他的图层
            hideLayers: false
          })
          MITT_BUS.emit('get-count-status', {
            count_2: res.features.length
          })
        })
      }
    },
    // 过滤换热站
    filterHuanrezhan() {
      // 请求换热站
      let BM_CODE = this.id;
      let attributeFilter = ''
      if (BM_CODE) {
        if (this.type === 'GRZ') {
          attributeFilter = 'GRZZJBM=' + '\'' + BM_CODE + '\''
        }

        if (this.type === 'HRZ') {
          attributeFilter = 'HRZBM=' + '\'' + BM_CODE + '\''
        }
      }
      Api.getDataOfHRZ({
        ids: [],
        // // 换热站名称 热源主键编码
        fields: ['SMID', 'HRZMC', 'ZJBM', 'GRZZJBM', 'RYMC', 'ZDMC', 'XQ_COUNT', 'GRJMHS', 'FWFJMHS', 'JMGRMJ', 'FWFJMGRMJ', 'SFZG'],
        attributeFilter: attributeFilter
      }).then(res => {
        if (!res.features || !res.features.length) { return }
        MITT_BUS.emit('rerender-highlight-layer', {
          data: res,
          type: 'heat-huanre',
          // 是否隐藏其他的图层
          hideLayers: false
        })
        // 换热站的编码
        const hrzBMs = res.features.map(v => v.properties.ZJBM)
        // 影响户数
        // 需要拆分
        // const countHS_1 = res.features.map(v => Number(v.properties.GRJMHS)).reduce((a, b) => { return a + b }, 0)
        // const countHS_2 = res.features.map(v => Number(v.properties.FWFJMHS)).reduce((a, b) => { return a + b }, 0)
        // MITT_BUS.emit('get-count-status', {
        //   count_3: countHS_1 + countHS_2,
        //   count_3_1: countHS_1,
        //   count_3_2: countHS_2,
        // })
        // 居民
        const countHS_1 = res.features.filter(v => {
          return v.properties.SFZG === '否'
        }).map(v => {
          return Number(v.properties.GRJMHS) + Number(v.properties.FWFJMHS)
        }).reduce((a, b) => a + b, 0)

        // 自管
        const countHS_2 = res.features.filter(v => {
          return v.properties.SFZG === '是'
        }).map(v => {
          return Number(v.properties.GRJMHS) + Number(v.properties.FWFJMHS)
        }).reduce((a, b) => a + b, 0)

        // const countHS_1 = res.features.filter(v => v.properties.SFZG === '否').reduce((a, b) => { return a.GRJMHS + b.FWFJMHS }, 0)
        // const countHS_2 = res.features.filter(v => v.properties.SFZG === '是').reduce((a, b) => { return a.GRJMHS + b.FWFJMHS }, 0)
        // MITT_BUS.emit('get-count-status', {
        //   count_3: countHS_1 + countHS_2,
        //   count_3_1: countHS_1,
        //   count_3_2: countHS_2,
        // })

        // 面积
        // 需要拆分
        // const countHS_3 = res.features.map(v => Number(v.properties.JMGRMJ)).reduce((a, b) => { return a + b }, 0)
        // const countHS_4 = res.features.map(v => Number(v.properties.FWFJMGRMJ)).reduce((a, b) => { return a + b }, 0)

        const countHS_3 = res.features.filter(v => {
          return v.properties.SFZG === '否'
        }).map(v => {
          return Number(v.properties.JMGRMJ) + Number(v.properties.FWFJMGRMJ)
        }).reduce((a, b) => a + b, 0)

        // 自管
        const countHS_4 = res.features.filter(v => {
          return v.properties.SFZG === '是'
        }).map(v => {
          return Number(v.properties.JMGRMJ) + Number(v.properties.FWFJMGRMJ)
        }).reduce((a, b) => a + b, 0)


        MITT_BUS.emit('get-count-status', {
          count_3: countHS_1 + countHS_2,
          count_3_1: countHS_1,
          count_3_2: countHS_2,
          count_4: countHS_3 + countHS_4,
          count_4_1: countHS_3,
          count_4_2: countHS_4,
          count_1: hrzBMs.length
        })
        // MITT_BUS.emit('get-count-status', {
        //   count_1: hrzBMs.length
        // })

        this.filterGongrefanwei(hrzBMs)

      })
    },
    // 过滤供热站
    filterGongrezhan() {
      const grzData = LayerObj['heat:grz']
      if (!grzData || !grzData.length) {
        return
      }
      // 过滤出当前的这个供热站
      grzData.forEach(v => {
        const source = v.getSource();
        source.getFeatures().filter(v_ => {
          return v_.get('ZJBM') !== this.id
        }).forEach(v__ => {
          source.removeFeature(v__)
        })
      })
      this.filterHuanrezhan()
    },
    // 设置了故障点
    setBarriorPoint() {
      if (!Object.keys(LayerObj).length) { return }
      this.isShining = true;
      // 开始一系列的分析
      // 清除所有的换热站站点

      // 底图置灰处理
      if (MAIN_STORE.BASE_LAYER_INS) {
        MAIN_STORE.BASE_LAYER_INS.setOpacity(0.2)
      }
      switch (this.type) {
        case 'GRZ':
          LayerObj['heat:hrz'].forEach(v_ => {
            MAIN_STORE.GLOBAL_MAP_INS.removeLayer(v_);
          })
          LayerObj['heat:hrz'] = [];

          // 清除面数据
          LayerObj['heat:area'].forEach(v_ => {
            MAIN_STORE.GLOBAL_MAP_INS.removeLayer(v_);
          })
          LayerObj['heat:area'] = [];

          LayerObj['heat:company'].forEach(v_ => {
            MAIN_STORE.GLOBAL_MAP_INS.removeLayer(v_);
          })
          LayerObj['heat:company'] = [];
          this.filterGongrezhan();
          break;
        case 'HRZ':
          LayerObj['heat:grz'].forEach(v_ => {
            MAIN_STORE.GLOBAL_MAP_INS.removeLayer(v_);
          })
          LayerObj['heat:grz'] = [];

          // 清除面数据
          LayerObj['heat:area'].forEach(v_ => {
            MAIN_STORE.GLOBAL_MAP_INS.removeLayer(v_);
          })
          LayerObj['heat:area'] = [];

          LayerObj['heat:company'].forEach(v_ => {
            MAIN_STORE.GLOBAL_MAP_INS.removeLayer(v_);
          })
          LayerObj['heat:company'] = [];
          this.filterHuanrezhan();
          break;
        default:
      }
    },
    cancelSimulate() {
      MITT_BUS.emit('rerender-highlight-layer', {
        data: null,
        type: 'enterprise'
      })
      MITT_BUS.emit('get-count-status', {
        count_1: 0,
        count_2: 0,
        count_3: 0,
        count_3_1: 0,
        count_3_2: 0,
        count_4: 0,
        count_4_1: 0,
        count_4_2: 0,
      })
    },
    showEchartReyuan(tab) {
      MITT_BUS.emit('listen-reyuan-chart', {
        mainTitleHide: this.mainTitleHide,
        activeTab: tab,
        mainTab: 'temp'
      })
    },
    showEchartHuanre(tab) {
      MITT_BUS.emit('listen-huanre-chart', {
        mainTitleHide: this.mainTitleHide,
        activeTab: tab,
        mainTab: 'temp'
      })
    }
  },
};
</script>

<template>
  <div class="simple-card" :class="[
    position, uiSize
  ]">
    <div class="header">
      <div class="main-title">
        <span class="main-title-1 font-YouSheBiaoTiHei" :style="getTitleStyle()">
          {{ mainTitle }}
          <!--          {{ type }}-->
        </span>
        <span class="main-tag" v-if="showRoute" @click="routeTo()">
          <!-- <span class="type-1" v-if="!showWarning">{{ tagText.tagTextP }}</span>
          <span class="type-2" v-if="showWarning">{{ tagText.tagTextW }}</span> -->
          <!-- 指标监控 >>> -->
        </span>
      </div>
      <!-- close -->
      <!-- <div class="close-area" v-if="showClose" @click="close">
      </div> -->
    </div>
    <div class="body" :class="[
      showButtom ? 'show-buttom' : ''
    ]">
      <div class="top" v-if="listData.length">
        <div class="inner font-AlibabaPuhui" v-for="(item, index) in listData" :key="index + 'top'">
          <span class="name" :class="[uiSize]">{{ item.name }}</span>
          <span class="value">{{ item.value }}</span>
        </div>
      </div>

      <div class="bottom" v-if="additionListData.length && !showAddition">
        <div class="inner font-AlibabaPuhui" v-for="(item, index) in additionListData" :key="index + 'bottom'">
          <span class="name">{{ item.name }}</span>
          <span class="value">{{ item.value }}</span>
        </div>
      </div>
    </div>
    <div class="popup-tip-container">
      <div class="popup-tip"></div>
    </div>
    <div class="ring-container">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/2000/xlink"
        viewBox="0 0 25.6 25.6" style="background-color: transparent" width="100%" height="100%">
        <use href="#icon-aqua"></use>
      </svg>
    </div>

    <div class="buttom-section" v-if="type === 'GRZ'">
      <div class="buttom-section-inner cursor-pointer">
        <span class="font-AlibabaPuhui" style="margin-right: 1rem" @click="() => { showEchartReyuan('shebei') }">
          设备监测
        </span>
        <span class="font-AlibabaPuhui" @click="() => { showEchartReyuan('temp') }">温度压力</span>
      </div>
    </div>

    <div class="buttom-section" v-if="type === 'HRZ'">
      <div class="buttom-section-inner cursor-pointer">
        <span class="font-AlibabaPuhui" style="margin-right: 1rem" @click="() => { showEchartHuanre('once') }">
          一次管网
        </span>
        <span class="font-AlibabaPuhui" @click="() => { showEchartHuanre('twice') }">二次管网</span>
      </div>
    </div>

    <div class="buttom-section" v-if="additionListData.length && showAddition">
      <div class="buttom-section-inner cursor-pointer" @click="() => { showAddition = false }">
        <span class="font-AlibabaPuhui">查看更多</span>
      </div>
    </div>
    <div class="buttom-section" v-if="isSimulating && ['GRZ', 'HRZ'].indexOf(this.type) !== -1"
      style="text-align: center;">
      <div class="buttom-section-inner cursor-pointer active">
        <img :src="iconDanger" alt="">
        <!-- <span v-if="!isShining" @click="setBarriorPoint">设为故障点</span> -->
        <span @click="cancelSimulate">取消模拟</span>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
@gapwidth: 3.5rem;

@keyframes shine {
  50% {
    opacity: 0;
  }
}

#LiuliangEchart {}

.liuliang-echart {
  overflow: hidden;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 40px;
  width: 472px;
  height: 300px;
}

.buttom-section {
  height: 4rem;
  position: relative;
  text-align: right;

  &>.buttom-section-inner {
    display: inline-block;
    padding: 0 1rem;
    font-size: 1.5rem;
    text-align: center;
    display: inline-flex;
    align-items: center;

    &.active>img {
      margin-right: 1rem;
      animation: shine 1s infinite;
    }

    &>span:hover {
      color: rgba(255, 99, 71, 1);
    }
  }
}

.simple-card {
  color: #ECF5FD;
  position: absolute;
  left: -22rem;
  bottom: v-bind(heightGap);
  border-radius: .5rem;
  background-color: rgba(36, 49, 63, 0.9);
  border: 1px solid rgba(34, 181, 255, .9);
  //background-image: url(./images/body.svg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 44rem;
  transform: scale(1);
  transform-origin: bottom center;

  &.small-size {
    left: -16rem;
    width: 32rem;
  }

  &>.header {
    width: 100%;
    height: 3.5rem;
    background-image: url(./images/main-header.svg);
    display: flex;
    justify-content: space-between;
    align-items: center;

    &>.main-title {
      height: 100%;
      font-size: 2rem;
      line-height: 2rem;
      align-items: center;
      width: 100%;
      display: flex;
      justify-content: space-between;

      &>span.main-title-1 {
        position: relative;
        left: 2rem;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        width: 50%;
        text-overflow: ellipsis;
        line-height: 3.6rem;
      }

      &>span.main-tag {
        font-size: 1.25rem;
        line-height: 1;
        position: relative;
        margin-right: 1rem;
        cursor: pointer;

        &>.type-1 {
          color: #02FF7F;
          border: 1px solid #02FF7F;
          background-color: rgba(2, 255, 129, 0.2);
          padding: 0 1rem;
          border-radius: 1rem;
        }

        &>.type-2 {
          color: #F93030;
          border: 1px solid #F93030;
          background-color: rgba(249, 48, 48, 0.2);
          padding: 0 1rem;
          border-radius: 1rem;
        }
      }
    }

    &>.close-area {
      margin-right: 2rem;
      width: 3rem;
      height: 3rem;
      background-image: url(./images/close.svg);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      cursor: pointer;
      position: relative;
      right: 1rem;
    }
  }

  &>.body {
    position: relative;
    padding: 1rem;
    overflow-y: auto;

    &.show-buttom {}

    &>div {
      &>.inner {
        line-height: 2.4rem;
        display: flex;
        margin-bottom: .5rem;
        padding: 5px;
        font-size: 1.6rem;

        &:hover {
          background-color: rgba(63, 81, 181, 0.5);
        }

        &:nth-child(even) {
          background-color: rgba(63, 81, 181, 0.2);

          &:hover {
            background-color: rgba(63, 81, 181, 0.5);
          }
        }

        &>.name {
          min-width: 15rem;
          color: #B9DAFF;

          &.small-size {
            min-width: 7rem;
          }
        }

        &>.value {
          margin-left: 1rem;
          color: #fff;
        }
      }

      &.bottom {
        border-top: 1px dashed rgba(63, 81, 181, 1);
      }
    }



    // height: 300px;
    // &::before {
    //   position: absolute;
    //   content: " ";
    //   z-index: -1;
    //   width: 100%;
    //   height: 100%;
    //   backdrop-filter: blur(4px);
    // }
  }

  &>.popup-tip-container {
    position: absolute;
    bottom: -2rem;
    left: 50%;
    margin-left: -1.9rem;
    content: "";
    width: 4rem;
    height: 2rem;
    pointer-events: none;
    overflow: hidden;

    &>.popup-tip {
      width: 2rem;
      height: 2rem;
      background-color: #132236;
      border: 1px solid rgba(34, 181, 255, .9);
      margin: -1rem auto 0;
      transform: rotate(45deg);
    }
  }

  &>.ring-container {
    position: absolute;
    z-index: -1;
    bottom: -34px;
    left: 50%;
    margin-left: -19px;
    content: "";
    width: 40px;
    height: 40px;
    pointer-events: none;
    overflow: hidden;
  }
}
</style>